<template>
  <div class="app-container">
    <div class="ssmain">
      <h2 style="text-align: center">《麻辣社区-群众呼声》申诉平台</h2>
      <el-form ref="form" :model="form" label-width="150px">

        <el-form-item label="申诉类型：" style="margin-bottom:0">
          <el-radio-group v-model="form.type">
            <el-radio label="1" >不予受理申诉</el-radio>
            <el-radio label="2">不满意件申诉</el-radio>
            <el-radio label="3">超期申诉</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <a href="https://video.mala.cn/data/User/demo/home/wenzheng/%E4%B8%8D%E4%BA%88%E5%8F%97%E7%90%86%E7%94%B3%E8%AF%89%E5%87%BD%E6%A8%A1%E6%9D%BF%288.18%29.docx" class="down" target="_blank">下载不予受理申诉模板 </a>
          <a href="https://video.mala.cn/data/User/demo/home/wenzheng/%E4%B8%8D%E6%BB%A1%E6%84%8F%E4%BB%B6%E7%94%B3%E8%AF%89%E5%87%BD%E6%A8%A1%E6%9D%BF%EF%BC%888.18%EF%BC%89.docx" class="down" target="_blank">下载不满意件申诉模板 </a>
          <a href="https://video.mala.cn/data/User/demo/home/wenzheng/%E8%B6%85%E6%9C%9F%E7%94%B3%E8%AF%89%E6%A8%A1%E6%9D%BF%289.11%29.docx" class="down" target="_blank">下载超期申诉模板</a>
        </el-form-item>
        <el-form-item label="申诉链接：">

          <el-input placeholder="请填入申诉链接" style="margin-bottom:10px;" v-for="url in urls" v-model="form.links[url]" clearable></el-input>
          <el-button type="warning" round size="mini" @click="urls+=1">+ 增填链接</el-button>
          <div  class="el-upload__tip">同一事件可上传多链接，不同事件需另提交申诉</div>
        </el-form-item>

        <el-form-item label="备注(选填)：">
          <el-input placeholder="请输入需要补充的申诉理由，没有补充内容可不填"  type="textarea" rows="5" v-model="form.textarea" clearable></el-input>
        </el-form-item>


        <el-form-item label="申诉文件：">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            multiple
            :on-error="onError"
            :on-remove="onRemove"
            :on-success="onSuccess"
            :on-progress="onProgress"
            :limit="5"
            >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">最大不可超过10MB，最多可上传5个</div>
          </el-upload>
        </el-form-item>

        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">提交申诉</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="less">
/deep/ .el-form-item__label {
  font-size: 20px;
}
/deep/ .el-radio__inner,/deep/ .el-radio__label{
  width: 20px;
  height:20px;
  font-size: 14px;
}
/deep/ .el-radio{
  margin-right: 60px;
}
.ssmain{
  width:850px;
  padding:20px;
  //background: #f6f6f6;
  .down{
    margin-right:52px;
    color:#20a0ff;
    font-size:12px;
  }
}
</style>
<script>
import { getShensu,uploadFile } from '@/api/user'

export default {

  data() {
    return {
      loading: false,
      urls:1,
      uploadUrl:'',
      form: {
        file:[],
        type: '',
        links:[]
      },
    }
  },
  created() {
    this.uploadUrl = uploadFile()
  },
  methods: {
    onProgress(event, file, fileList) {
      console.log(event)
    },
    onSuccess(res, file, fileList) {
      this.$set(this.form, 'file', fileList);
    },
    onRemove(res, file) {
      this.$set(this.form, 'file', file);
    },
    onError(err) {
      let myError = err.toString();
      myError = myError.replace("Error: ", "")
      myError = JSON.parse(myError);
      this.$message.error(myError.message)
    },
    onSubmit() {
      console.log(this.form)
    }
  }
}
</script>
